<template>
	<vk-data-dialog
		v-model="value.show"
		:title="page.title"
		:top="page.top"
		:width="page.width"
		mode="form"
	>
		<!-- 页面主体内容开始 -->
		<vk-data-form
			ref="form1"
			:form-type="value.mode"
			v-loading="page.loading"
			v-model="form1.data"
			:rules="form1.props.rules"
			:action="form1.props.action"
			:columns="form1.props.columns"
			:loading.sync="form1.props.loading"
			:labelWidth="form1.props.labelWidth"
			:show-cancel="page.showCancel"
			:cancel-text="page.cancelText"
			:submit-text="page.submitText"
			@success="onFormSuccess"
		>
			<template v-slot:user_id>
				<view style="display: flex;align-items: center;">
					<el-avatar v-if="data.avatar" :src="data.avatar" fit="cover"></el-avatar>
					<text style="margin-left: 10px;">{{ data.nickname }}（ID：{{ data._id }}）</text>
				</view>
			</template>
		</vk-data-form>
		<!-- 页面主体内容结束 -->
	</vk-data-dialog>
</template>

<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
	props: {
		value: {
			Type: Object,
			default: function() {
				return {
					show: false,
					mode: "",
					item: ""
				};
			}
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			// 页面基础数据
			page: {
				title: "角色绑定",
				submitText: "绑定",
				cancelText: "关闭",
				showCancel: true,
				top: "7vh",
				width:"800px",
				loading: false
			},
			data:{

			},
			form1: {
				// 表单请求数据，此处可以设置默认值
				data: {
					user_id: "",
					roleList: [],
					reset: true
				},
				// 表单属性
				props: {
					// 表单请求地址
					action: "admin/system/user/sys/bindRole",
					// 表单字段显示规则
					columns: [
						{ key:"user_id", title:"用户", type:"text" },
						{
							key: "roleList", title: "角色列表", type: "table-select", placeholder:"选择角色",
							action:"admin/system/role/sys/getList",
							columns:[
								{ key:"role_name", title:"角色昵称", type:"text", nameKey:true },
								{ key:"role_id", title:"角色标识", type:"text", idKey:true }
							],
							formData:{
								enable:true
							},
							queryColumns:[
								{ key: "role_name", title: "角色昵称", type: "text", width: 150, mode: "%%" },
								{ key: "role_id", title: "角色标识", type: "text", width: 150, mode: "%%" },
								{ key: "enable", type: "text", mode: "=", hidden:true }
							],
							multiple:true,
							pageSize:10, // 只有5和10可以选
						},
					],
					// 表单验证规则
					rules: {
						user_id: [
							{ "required": true, "message": "user_id不能为空", "trigger": "change" }
						]
					},
					// label宽度
					labelWidth:"100px",
					// label对其方式
					labelPosition:"left",
				}
			}
		};
	},
	mounted() {
		that = this;
		that.init();
	},
	methods: {
		// 初始化
		init() {
			let { value } = that;
			that._input(value);
		},
		_input(value){
			that.$emit("input", value);
		},
		// 监听 - 页面打开
		onOpen() {
			that = this;
			let { value } = that;
			let { role = [], _id } = value.item;
			that.data = value.item;
			that.form1.props.show = true;
			that.form1.data.user_id = _id;
			that.form1.data.roleList = role;
		},
		// 监听 - 页面关闭
		onClose() {
			that.resetForm();
		},
		// 表单提交成功后
		onFormSuccess() {
			that.close();
			that.$emit("success");
		},
		// 打开页面
		open() {
			let { value } = that;
			value.show = true;
			that._input(value);
		},
		// 关闭页面
		close() {
			let { value } = that;
			value.show = false;
			that._input(value);
		},
		// 表单重置
		resetForm() {
			that.$refs.form1.resetForm();
		},
		// 表单提交
		submitForm() {
			that.$refs.form1.submitForm();
		},
	},
	watch: {
		// 监听页面的显示和关闭
		"value.show": {
			handler(newValue, oldValue) {
				let that = this;
				if (newValue) {
					// 页面显示
					that.onOpen();
				} else {
					// 页面关闭
					that.onClose();
				}
			}
		}
	},
	// 过滤器
	filters: {},
	// 计算属性
	computed: {}
};
</script>

<style lang="scss" scoped>

</style>
